﻿var mouseEvent =  function (event)
{


    var inputs = document.getElementsByTagName("input");

    for ( var index =0; index< inputs.length; index++)
        {
            if (inputs[index].name==='XY') inputs[index].value = event.x + "," + event.y;
            if (inputs[index].name ==='offsetXY')  inputs[index].value  =event.offsetX + "," + event.offsetY;
            if (inputs[index].name ==='clientXY')  inputs[index].value  =event.clientX + "," + event.clientY;
            if (inputs[index].name ==='pageXY')  inputs[index].value  =event.pageX + "," + event.pageY;
            if (inputs[index].name ==='layerXY')  inputs[index].value  =event.layerX + "," + event.layerY;
            if (inputs[index].name ==='screenXY')  inputs[index].value  =event.screenX + "," + event.screenY;
        }
        /**
//    <li/>X,Y : <input type="text" name="XY">
//    <li/>offset X,Y  : <input type="text" name="offsetXY" >
//    <li>client X,Y : <input type="text" name="clientXY" >
//    <li>screen X,Y :<input type="text" name="screenXY">
//    <li>page   X,Y : <input type="text" name="pageXY">
//    <li>layer  X,Y : <input type="text" name="layerXY">
 * 
 */
}

var boxSizeInfo = function  (event)
{
/**
//    <li/>top,left : <input type="text" name="topleft">
//    <li/>width,height  : <input type="text" name="size" >
//    <li>offsetTop,offsetLeft : <input type="text" name="offsettopleft"  >
 * 
 */
    var elem = document.getElementById("boxinfo");
    var inputs = document.getElementsByTagName("input",elem);
    for ( var index =0; index< inputs.length; index++)
    {
        if (inputs[index].name==='topleft') inputs[index].value = getStyle(this,'top') + "," + getStyle(this,'left');
        if (inputs[index].name ==='offsetSize')  inputs[index].value  = this.offsetWidth + ","+ this.offsetHeight;//getStyle(this,'width') + "," +  getStyle(this,'height');
        if (inputs[index].name ==='clientSize')  inputs[index].value  =this.clientWidth + "," + this.clientHeight;
        if (inputs[index].name ==='offsettopleft')  inputs[index].value  =this.offsetTop + "," + this.offsetLeft;
        if (inputs[index].name ==='clenttopleft')  inputs[index].value  =this.clientTop + "," + this.clientLeft;
    }

    // Stopping Event Bubbling
    if(event&&event.stopPropagation)
      //andthereforeitsupportstheW3C stopPropagation() method
      event.stopPropagation();
      else
      //Otherwise,weneedtousetheInternet Explorer
      //wayofcancellingeventbubbling
      window.event.cancelBubble=true;
};

function getStyle(elem,name )
{ 
    if ( elem.style)
    { 
        return elem.style[name];
    } else if ( elem.currentStyle) {
        return elem.currentStyle[name];
    } else if ( document.defualtView && document.defaultView.getComputedStyle)
    {
        // text-align 같은 style rule 일 경우를 대비하여
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();

        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    } else return null;
}

/*
 * mousedown
mouseup
mouseover
mousemove
mouseout
 */
addEvent(window, 'load',function () {
    addEvent(document.getElementById("main"),'mousemove' ,mouseEvent);
    addEvent(document.getElementById("main"),'click' ,boxSizeInfo);
    //addEvent(document.getElementById("box"),'click' ,function() { Function.prototype.call(event,boxSizeInfo);});
    addEvent(document.getElementById("box"),'click' , boxSizeInfo);


});